<style>
    .model-form .layui-form-label {
        width: 100px;
    }

    .model-form .layui-input-block {
        margin-left: 130px;
    }

    .border0 {
        border: 0;
    }

    .sureBtn {
        width: 60px;
        float: left;
        margin-left: 20px;
        background: #00833D;
        height: 36px;
        color: white;
        line-height: 36px;
        text-align: center;
        border-radius: 2px;
        cursor: pointer;
    }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">载具编号：</label>
                                    <div class="layui-input-inline mr0">
                                        <input name="code" class="layui-input" type="text"
                                               placeholder="请输入载具编号"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">货位编号：</label>
                                    <div class="layui-input-inline mr0">
                                        <input name="spaceCode" class="layui-input" type="text"
                                               placeholder="请输入货位编号"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">仓库：</label>
                                    <div class="layui-input-inline mr0">
                                        <select id="warehouseId" name="warehouseId" lay-filter="warehouseId" lay-search
                                                lay-verify=""></select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">库区：</label>
                                    <div class="layui-input-inline mr0">
                                        <select id="areaId" name="areaId" lay-filter="areaId"
                                                lay-search lay-verify=""></select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">货架：</label>
                                    <div class="layui-input-inline mr0">
                                        <select id="shelfId" name="shelfId" lay-search lay-verify=""></select>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog"
                                            lay-submit>查询
                                    </button>
                                    <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="lay-btn-rows">
                    <div class="lay-btn-box">
                        <div class="lay-btn-lt">
                            <button id="palletBoxListBtnAdd" class="layui-btn icon-btn color-reseda">添加</button>
                            <button id="purchaseBoxrBtnConfirm" style="display: none" class="layui-btn icon-btn color-reseda">确认选择</button>
                        </div>
                        <div class="lay-btn-rt">


                        </div>
                    </div>
                </div>
            </div>
            <!-- 表格 -->
            <table class="layui-table" id="palletBoxListTable" lay-filter="palletBoxListTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="palletBoxListTableBar">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>
    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
    <a class="layui-btn layui-btn-xs" lay-event="printBarcode">打印条码</a>
</script>

<!-- 表单弹窗 添加 -->
<script type="text/html" id="palletBoxListForm">
    <form lay-filter="palletBoxListForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>载具类型</label>
            <div class="layui-input-block">
                <select id="vehicleTypeId" name="vehicleTypeId" lay-filter="vehicleTypeId" lay-verify="required" required lay-search></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>规格尺寸</label>
            <div class="layui-input-block">
                <select id="vehicleStandardSizesId" name="vehicleStandardSizesId" lay-verify="required" required lay-search></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>计量单位</label>
            <div class="layui-input-block">
                <input id="unit" type="text" readonly class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>托盘编码前缀</label>
            <div class="layui-input-block">
                <input name="prefix" placeholder="请输入托盘编码前缀" type="text" maxlength="20" class="layui-input"
                       lay-verify="required|isOnly" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>新增托盘数量</label>
            <div class="layui-input-block">
                <input name="quantity" placeholder="请输入新增托盘数量" type="text" maxlength="3" class="layui-input"
                       lay-verify="required|integer" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">托盘照片</label>
            <div id="trayPhotoUpload" class="layui-btn" style="float: left;"><i class="layui-icon">&#xe681;</i>上传图片
            </div>
            <div id="trayPhotoUpload_path" style="margin-left: 260px;line-height: 40px;"></div>
            <input id="trayPhoto" name="trayPhoto" type="hidden"/>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" placeholder="请输入备注" maxlength="200" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="palletBoxListFormSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- 表单弹窗 编辑 -->
<script type="text/html" id="palletBoxListEdit">
    <form lay-filter="palletBoxListForm" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>编码</label>
                <div class="layui-input-block">
                    <input name="code" type="text" class="layui-input border0" readonly/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>载具类型</label>
                <div class="layui-input-block">
                    <input name="vehicleTypeName" type="text" class="layui-input border0" readonly/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>规格尺寸</label>
                <div class="layui-input-block">
                    <input name="vehicleStandardSizes" type="text" class="layui-input border0" readonly/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red">*</span>计量单位</label>
                <div class="layui-input-block">
                    <input name="unitName" type="text" readonly class="layui-input border0"/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">托盘照片</label>
                <div id="trayPhotoUpload_path" style="line-height: 38px;"></div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">所在货位号</label>
                <div class="layui-input-block">
                    <input name="spaceCode" placeholder="请输入所在货位号" type="text" maxlength="200"
                           class="layui-input" style="width: 65%; float: left;"/>
                    <div class="sureBtn" id="sure">确定</div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">所在仓库</label>
                <div class="layui-input-block">
                    <input name="warehouseName" type="text" class="layui-input border0" readonly/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">所在库区</label>
                <div class="layui-input-block">
                    <input name="areaName" type="text" class="layui-input border0" readonly/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">所在货架</label>
                <div class="layui-input-block">
                    <input name="shelfName" type="text" class="layui-input border0" readonly/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">创建时间</label>
                <div class="layui-input-block">
                    <input name="createTime" type="text" class="layui-input border0" readonly/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
                <label class="layui-form-label">最后变动时间</label>
                <div class="layui-input-block">
                    <input name="updateTime" type="text" class="layui-input border0" readonly/>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12">
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" type="text" maxlength="200" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="palletBoxListFormSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script>
    var $, layer;

    function previewImg(index) {
        var img = new Image();
        img.src = $(index).attr("src");
        var height = img.height; //获取图片高度
        var width = img.width; //获取图片宽度
        if (width > 1000) {
            height = 1000 / width * height;
            width = 1000;
            if (height > 800) {
                width = 800 / height * width;
                height = 800;
            }
        }
        if (height > 800) {
            width = 800 / height * width;
            height = 800;
        }

        var imgHtml = "<img src='" + $(index).attr("src") + "' style='width: " + width + "px; height: " + height + "px;' />";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [width + 'px', (height + 50) + 'px'],
            shadeClose: true,//点击外围关闭弹窗
            scrollbar: false,//不现实滚动条
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }

    layui.use(['layer', 'form', 'table', 'admin', 'upload'], function () {
        $ = layui.jquery;
        layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        let nowData = {};
        if (typeof parentData != "undefined") {
            nowData = { ...parentData };
            if (nowData.eventName == "radio") {
                $("#purchaseBoxrBtnConfirm").show();
                $("#palletBoxListBtnAdd").hide();

            }
        }

        //仓库列表
        admin.initDataSelect("enterprisecab/warehouse/admin/warehouse/list", {limit: 9999}, "warehouseId", null, "仓库", null, null);
        //仓库选择事件
        form.on('select(warehouseId)', function (data) {
            $("#areaId").empty();
            //仓库库区列表
            admin.initDataSelect("enterprisecab/warehouse/admin/warehouseArea/list", {
                limit: 9999,
                warehouseId: data.value
            }, "areaId", null, "库区", null, null);
        });
        //仓库库区选择事件
        form.on('select(areaId)', function (data) {
            $("#shelfId").empty();
            //库区货架列表
            admin.initDataSelect("enterprisecab/warehouse/admin/warehouseShelf/list", {
                limit: 9999,
                warehouseAreaId: data.value
            }, "shelfId", null, "库区货架", null, null);
        });


        // 渲染表格
        var insTb = table.render({
            elem: '#palletBoxListTable',
            url: config.base + 'enterprisecab/warehouse/admin/palletBoxList/list',
            page: true,
            cellMinWidth: 100,
            where: { ...nowData?.where },
            cols: [[
                  { type: "radio", width: 60, hide: !(nowData?.eventName == "radio") }
                , {type: 'numbers'}
                , {field: 'code', align: 'center', title: '载具编号'}
                , {field: 'vehicleTypeName', align: 'center', title: '载具类型'}
                , {field: 'vehicleStandardSizes', align: 'center', title: '规格尺寸'}
                , {field: 'warehouseName', align: 'center', title: '所在仓库'}
                , {field: 'areaName', align: 'center', title: '所在库区'}
                , {field: 'shelfName', align: 'center', title: '所在货架'}
                , {field: 'spaceCode', align: 'center', title: '货位编号'}
                , {field: 'createTime', align: 'center', title: '创建时间'}
/*                , {align: 'center', toolbar: '#palletBoxListTableBar', title: '操作', width: 200}*/
                ,{ align: "center", fixed: "right", toolbar: "#palletBoxListTableBar", title: "操作", width: 200, hide: nowData?.eventName == "radio" }
            ]]
        });

        // 工具条点击事件
        table.on('tool(palletBoxListTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'del') { // 删除
                doDelete(obj);
            } else if (obj.event === 'printBarcode') { // 打印
                admin.getPrintBarcode('enterprisecab/warehouse/admin/palletBoxList/getBarCode', data.code);
            }
        });

        //监听排序
        table.on('sort(palletBoxListTable)', function (obj) {
            table.reload('palletBoxListTable', {
                initSort: obj,
                where: {
                    sort: obj.field,
                    order: obj.type
                }
            });
        });

        // 搜索
        form.on('submit(formSubSearchLog)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}}, 'data');
        });

        // 重置搜索
        form.on('submit(resets)', function (data) {
            $(".lay-header").find('select').val("");
            $(".lay-header").find('input').val("");
            let field = data.field;
            for (let key in field) {
                field[key] = ''
            }
            insTb.reload({where: field, page: {curr: 1}}, 'data');
        });

        // 添加按钮点击事件
        $('#palletBoxListBtnAdd').click(function () {
            showEditModel();
        });

        // 显示编辑弹窗
        function showEditModel(data) {
            admin.open({
                type: 1,
                area: data ? '780px' : '480px',
                offset: '150px',
                title: data ? '修改托盘料箱清单' : '添加托盘料箱清单',
                content: data ? $('#palletBoxListEdit').html() : $('#palletBoxListForm').html(),
                success: function () {
                    form.val('palletBoxListForm', data);

                    //自定义验证规则
                    form.verify({
                        integer: [/^[0-9]\d*$/, '格式错误'],
                        isOnly: function (value) {
                            var isOnly = true;
                            var idVal = $("form input[name='id']").val();
                            admin.req('enterprisecab/warehouse/admin/palletBoxList/isOnly', {
                                code: value,
                                id: idVal
                            }, function (res) {
                                if (res.code == 200) {
                                    isOnly = res.data;
                                }
                            }, 'GET', false);
                            if (!isOnly) {
                                return "托盘编码前缀必须唯一"
                            }
                        }
                    })

                    if (data) {
                        $("input[name='quantity']").parent().parent().hide();
                    }

                    $("#sure").click(function () {
                        if ($(this).prev().val() != "") {
                            // 查询货位
                            admin.req('enterprisecab/warehouse/admin/warehouseShelfSpace/findByCode', {code: $(this).prev().val()}, function (res) {
                                if (res.code == 200) {
                                    $("input[name='warehouseName']").val(res.data.warehouseName);
                                    $("input[name='areaName']").val(res.data.warehouseAreaName);
                                    $("input[name='shelfName']").val(res.data.shelfName);
                                } else {
                                    layer.msg('获取货位失败', {icon: 2, time: 1000});
                                }
                            }, 'GET');
                        }
                    })

                    //载具类型列表
                    admin.initDataSelect("enterprisecab/warehouse/admin/vehicleType/list", {limit: 9999, isDeleted: 1}, "vehicleTypeId", data ? data.vehicleTypeId : null, "载具类型", null, null);
                    //载具类型事件
                    form.on('select(vehicleTypeId)', function (data) {
                        //计量单位
                        admin.req('enterprisecab/warehouse/admin/vehicleType/list', {limit: 9999,isDeleted: 1}, function (res) {
                            for (var k = 0; k < res.data.length; k++) {
                                if (data.value == res.data[k].id) {
                                    $("#unit").val(res.data[k].unitName);
                                }
                            }
                        }, 'GET');
                        //清空规格尺寸
                        $("#vehicleStandardSizesId").empty();
                        //载具规格尺寸列表
                        admin.initDataSelect("enterprisecab/warehouse/admin/vehicleStandardSizes/list", {limit: 9999,vehicleTypeId: data.value}, "vehicleStandardSizesId", data ? data.vehicleStandardSizesId : null, "规格尺寸", "standardSizes", null);
                    });

                    upload.render({
                        elem: '#trayPhotoUpload'
                        , url: config.upload_url + 'upload?path=' + img_path
                        , auto: true
                        , acceptMime: 'image/*'
                        , headers: {authorization: 'Bearer ' + config.getToken()}
                        , done: function (res) {
                            if (res.code == 200) {
                                layer.msg("上传成功", {icon: 1});
                                var imagUrl = res.data.url;
                                // if(imagUrl){
                                //     imagUrl=imagUrl.substring(imagUrl.indexOf('/')+1)
                                // }
                                $('#trayPhotoUpload_path').html('<img src="' + imagUrl + '" style="height: 35px;cursor: pointer;" onclick="previewImg(this)" />');
                                $('#trayPhoto').val(imagUrl);
                            } else if (res.code == 502) {
                                return location.replace('admin/login.html');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }
                    });

                    if (data && data.trayPhoto) {
                        $('#trayPhotoUpload_path').html('<img src="' + data.trayPhoto + '" style="height: 35px;cursor: pointer;" onclick="previewImg(this)" />');
                    }

                    // 表单提交事件
                    form.on('submit(palletBoxListFormSubmit)', function (d) {
                        layer.load(2);
                        admin.req(data ? 'enterprisecab/warehouse/admin/palletBoxList/update' : 'enterprisecab/warehouse/admin/palletBoxList/add', d.field, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                table.reload('palletBoxListTable');
                                layer.closeAll('page');
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, data ? 'PUT' : 'POST');
                        return false;
                    });
                }
            });
        }

        // 删除
        function doDelete(obj) {
            layer.confirm('确定要删除吗？', {
                offset: '65px',
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('enterprisecab/warehouse/admin/palletBoxList/' + obj.data.id, {}, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'DELETE');
            });
        }

        // 导出excel
        $('#palletBoxListBtnExport').click(function () {
            var checkRows = table.checkStatus('palletBoxListTable');
            if (checkRows.data.length == 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                table.exportFile(insTb.config.id, checkRows.data, 'xls');
            }
        });

        $("#purchaseBoxrBtnConfirm").click(function () {
            let list = table.checkStatus("palletBoxListTable").data;
            console.log(nowData);
            let formObj={
                   id:list[0].id,
                   spaceCode:nowData.warehouseShelfSpaceCode,
                   code:list[0].code
            }
           childData.formObjOut=formObj;
           admin.req('enterprisecab/warehouse/admin/palletBoxList/update', formObj, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg("操作成功", {icon: 1});
                    table.reload('palletBoxListTable');
                   /* layer.closeAll('page');*/
                    //todo 刷新上个页面的选择


                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            },'PUT');
            layer.close(nowData.zindex);
        });


    });
</script>